// 主页面未登录自动退出
CheckLogin()
//主页面渲染用户名
renderUsername()
//主页面账号退出按钮
logout()
//统计区域
async function getData() {
    const res = await axios.get('/dashboard')
    console.log(res.data)
    const { overview, groupData, provinceData, salaryData, year } = res.data
    //统计顶部数据
    renderOverview(overview)
    //折线图
    renderYearSalary(year)
    //饼状图
    renderSalary(salaryData)
    //柱状图
    renderGroup(groupData)
    //男女薪资双饼图
    renderGender(salaryData)
    //籍贯分布图
    renderProvince(provinceData)
}
getData()
//统计顶部数据
function renderOverview(overview) {
    Object.keys(overview).forEach(e => {
        document.querySelector(`.${e}`).innerHTML = overview[e]
    })
}
//折线图
function renderYearSalary(year) {
    const mychart = echarts.init(document.querySelector('#line'))
    const option = {
        title: {
            text: '2024全学科薪资走向',
            top: 20,
            left: 20
        },
        grid: {
            top: '20%'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#D5D5D5'
                }
            },
            type: 'category',
            //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: year.map(ele => ele.month),
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                // data: [820, 932, 901, 934, 1290, 1330, 1320],
                data: year.map(ele => ele.salary),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 6,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#4C9CEA' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5C76EF' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#75ABF2' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                symbolSize: 8
            }
        ]
    }
    mychart.setOption(option)
}

//饼状图
function renderSalary(salaryData) {
    const mychart = echarts.init(document.querySelector('#salary'))
    const option = {
        title: {
            text: '班级薪资分布',
            top: 15,
            left: 15
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['57%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10,
                    borderWidth: 5,
                    borderColor: '#fff'
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(item => ({
                    name: item.label,
                    value: item.g_count + item.b_count
                }))
            }
        ],
        color: ['#FDA225', '#5097FF', '#3ABDFA', '#34D49A']
    };
    mychart.setOption(option)
}
//柱状图
function renderGroup(groupData) {
    const mychart = echarts.init(document.querySelector('#lines'))
    const option = {
        xAxis: {
            type: 'category',
            data: groupData[1].map(item => item.name),
            axisLine: {
                color: '#999',
                lineStyle: {
                    type: 'dashed',
                    color: '#D5D5D5'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '期望薪资',
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#3AD59D' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#CDF4E7' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            {
                name: '实际薪资',
                data: groupData[1].map(item => item.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#55A4F0' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#D2E7FB' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ],
        tooltip: {
            trigger: 'item'
        }
    };
    mychart.setOption(option)
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.classList.contains('btn')) {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
        }
        const num = e.target.innerHTML
        const data = groupData[num]
        option.xAxis.data = data.map(item => item.name)
        option.series[0].data = data.map(item => item.hope_salary)
        option.series[1].data = data.map(item => item.salary)
        mychart.setOption(option)
    })
}
//男女薪资双饼图
function renderGender(salaryData) {
    const mychart = echarts.init(document.querySelector('#gender'))
    const option = {
        title: [
            {
                text: '男女薪资分布',
                top: 10,
                left: 10
            },
            {
                text: '男',
                top: '45%',
                left: '47%',
                textStyle: {
                    fontSize: 12
                }
            },
            {
                text: '女',
                top: '85%',
                left: '47%',
                textStyle: {
                    fontSize: 12
                }
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '男生薪资',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    //   position: 'center'
                },
                // emphasis: {
                //   label: {
                //     show: true,
                //     fontSize: 40,
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                    show: true
                },
                data: salaryData.map(item=>({
                    name:item.label,
                    value:item.b_count
                }))
            },
            {
                name: '女生薪资',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    //   position: 'center'
                },
                // emphasis: {
                //   label: {
                //     show: true,
                //     fontSize: 40,
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                    show: true
                },
                data: salaryData.map(item=>({
                    name:item.label,
                    value:item.g_count
                }))
            }
        ],

    };
    mychart.setOption(option)
}
//籍贯分布图
function renderProvince(provinceData){
    const mychart = echarts.init(document.querySelector('#map'))
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]
      dataList.forEach(item=>{
        provinceData.forEach(el =>{
            if(el.name.includes(item.name)){
                item.value = el.value
            }
        })
      })
    const option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data:dataList
          },
        ],
      }
                

    mychart.setOption(option)
}
